<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>滑块</title>
    <link rel="stylesheet" href="../basestyle.css">
    <link rel="stylesheet" href="./slider.css">
</head>
<body>
    <div class="page slider js_show">
        <div class="page__hd">
            <h1 class="page__title">Slider</h1>
            <p class="page__desc">滑块</p>
            <p class="page__desc">动态可调节滑块需要js配合</p>
        </div>
        <br>

        <div class="page__bd page__bd_spacing">
            <p>静态滑块</p>
            <div class="slider">
                <div class="slider__inner">
                    <div style="width: 0%;" class="slider__track"></div>
                    <div style="left: 0%;" class="slider__handler"></div>
                </div>
            </div>
            <br>
            <p>动态滑块</p>
            <div class="slider-box">
                <div class="slider">
                    <div id="sliderInner" class="slider__inner">
                        <div id="sliderTrack" style="width: 50%;" class="slider__track"></div>
                        <div id="sliderHandler" style="left: 50%;" class="slider__handler"></div>
                    </div>
                </div>
                <div id="sliderValue" class="slider-box__value">50</div>
            </div>
        </div>
    </div>
    <script>
        function $id(id) {
            return document.getElementById(id)
        }
        var sliderInner=$id("sliderInner"),
            sliderTrack=$id("sliderTrack"),
            sliderValue=$id("sliderValue"),
            sliderInnerWidth=sliderInner.offsetWidth,//滑块长度
            sliderInnerOffsetLeft=sliderInner.offsetLeft;//滑块距离左边距离
        $id("sliderHandler").addEventListener("touchmove",function (e) {//手机端
            var leftDistance=e.touches[0].clientX-sliderInnerOffsetLeft;
            if(leftDistance>=0&&leftDistance<=sliderInnerWidth){
                var percentage=Math.round(leftDistance/sliderInnerWidth*100)
                this.style.left=percentage+"%";
                sliderTrack.style.width=percentage+"%";
                sliderValue.innerHTML=percentage;
            }
        })
    </script>
</body>
</html>